/* Image Setting CSS */  
 body {
        margin: 40px;
        font-family: "Raleway", arial, sans-serif;
        font-size: 1em;
        line-height: 1.4;
      }
        .wrapper {
           display: flex;
  flex-direction: column;
  gap: 2px;
      }
   .box {
        background-color: #ffffff;
        color: #000000;
        padding: 10px;
      /*  font-size: 125%; */
        border: 0px solid;
      }
				.box img {
    display: block;               /* Removes any inline spacing around the image */
    margin-left: auto;             /* Centers the image horizontally */
    margin-right: auto;            /* Centers the image horizontally */
    max-width: 100%;               /* Ensure the image doesn't overflow the container */
    max-height: 100%;              /* Ensure the image doesn't overflow the container */
    object-fit: contain;          /* Maintain the aspect ratio of the image */
		box-shadow:
          rgba(0, 0, 0, 0.25) 0px 14px 28px,
          rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

.box figcaption {
  margin-top: 12px;
  text-align:center;
  font-size: 14px;
  /*margin: 0; */
	 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
				
 .separator {
  margin: 0 0.50rem;
}    
  .pos {
  display: flex;
  text-align: center;
  justify-content: center;
}
  .row{
       align-items: center;
       justify-content: center;
      }  
     @media (max-width: 600px) {
  .box--four-col {
    flex-direction: column;
   }
  }
	.box--three-col {
  display: flex;
  justify-content: center;   /* Center columns */
  gap: 20px;
  max-width: 1100px;         /* Control how wide the row can be */
  margin: 0 auto;            /* Centers the whole block */
  padding: 0 20px;
  box-sizing: border-box;
}
/* Individual column styling */
.box--three-col .col {
  flex: 0 1 30%;                   /* Make each column 30% of the container's width, but allow flex */
  display: flex;
  flex-direction: column;         /* Stack image and caption vertically */
  align-items: center;            /* Center the image and caption horizontally */
  text-align: center;             /* Center caption text */
  background: #ffffff;
  padding: 10px;
  color: #000000;
  border: 0px solid #ddd;         /* Light border for columns */
}
.box--three-col img {
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: #ffffff;  /* optional */
	box-shadow:
          rgba(0, 0, 0, 0.25) 0px 14px 28px,
          rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.box--three-col .caption {
  font-size: 14px;
  margin: 1;
	 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
	         ol, ol li  {
            /* font-family: "Oswald", arial, sans-serif !important;*/
            /*  font-size:   18px;*/
                 font-size:1em;
            font-weight: 300 !important; 
      }
          .capheading {
        font-size: 35px;
        font-weight: bold;
      }
       .heading {
       font-family: "Oswald", arial, sans-serif; 
        font-size: 25px;
        font-weight: 300;
      }
		.target-section:target .heading {
    background-color: red; /* #fff3a0;*/
    color: white;
		box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.5);
		/*box-shadow: 0 0 0 6px #fff3a0; */
    border-radius: 4px;
    transition: background-color 0.6s ease, box-shadow 0.6s ease;
    }
     /*Highlight Text */
    .target-section:target {
      border: 1px solid red;   /* thin red border */
      padding: 8px;            /* prevents border touching content */
      transition: border 0.6s ease;
      }
      .shadowhead {
        font-family: "Oswald", arial, sans-serif;
        font-size: 25px;
        font-weight: 300;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      }
      .conthead {
        color: white;
        text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
        font-weight: bold;
      }
      .glowhead {
        color: #ff0000;
        text-shadow:
          0 0 5px #ff0000,
          0 0 10px #ff0000,
          0 0 20px #ff5555;
      }
      hr {
        display: block;
        width: 50%;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
      }
      h1 {
        font-family: "Oswald", arial, sans-serif !important;
        font-size: 36px;
        font-weight: 300;
      }
      .pageTitle {
        font-family: "Oswald", sans-serif !important;
        -webkit-font-smoothing: antialiased !important;
      }
      strong {
        font-weight: bold;
      }
     .spaced-line {
    display: block;
    margin-top: 8px;
   font-weight: 500;
    }
	.image-placeholder {
    width: 300px;
    height: 200px;
    border: 2px dashed #999;
    background-color: #f0f0f0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
}